Sigma Web Development

📒 Notes for Lecture 05: Images, Tables & Lists

• <img> Tag: Display an image with:
  • src="Squid Game.png" – source file
  • alt="Squid" – alternate text for errors
  • height="200" – sets height; width auto-adjusts
• Table Structure:
  • <table> wraps the entire table
  • <caption> gives a title (“Employee Details”)
  • <thead> contains header row with <tr> and <th>
  • <tbody> holds data rows (<td>), with examples of colspan and rowspan
  • <tfoot> provides a footer row for summary or footer data
• Table Cell Spanning:
  • colspan="2" merges two columns in one cell
  • rowspan="2" merges two rows in one cell
• Unordered Lists (<ul>):
  • Default bullet style: <ul> … </ul>
  • Square bullets: <ul type="square">
  • Circle bullets: <ul type="circle">
• Ordered Lists (<ol>):
  • Default numeric: <ol> … </ol>
  • Lowercase roman: type="i"
  • Uppercase roman: type="I"
  • Lowercase alpha: type="a"
  • Uppercase alpha: type="A"
• Definition List (<dl>):
  • <dl> wraps the list
  • <dt> defines the term
  • <dd> provides the description
• Anchor Wrapping an Image: Use <a href="... " target="_blank"> around an <img> to make the image clickable.
• CSS for Tables:

  table {
      border: 4px solid red;
  }
  caption {
      border: 4px solid green;
      margin-bottom: 10px;
  }
  th {
      border: 2px solid yellowgreen;
  }
  td {
      border: 2px solid purple;
  }